<!DOCTYPE html>
<html
        xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" xmlns:th="http://www.thymeleaf.org"
        layout:decorate="~{base/layout}">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>消息中心-我的聊天</title>
<!--    <link rel="stylesheet" th:href="@{/chat/layui/css/layui.css}" type="text/css">-->
<!--    <link rel="stylesheet" th:href="@{/chat/css/base.css}" type="text/css">-->
<!--    <link rel="stylesheet" th:href="@{/chat/css/chats.css}" type="text/css">-->
<!--    <link th:href="@{/lyear/css/style.min.css}" rel="stylesheet" type="text/css"/>-->
<!--    <link th:href="@{/bootstrap/css/bootstrap.css}" rel="stylesheet" type="text/css">-->
</head>
<div layout:fragment="content">
    <div class="med_tittle_section">
        <div class="med_img_overlay"></div>
        <div class="container">
            <div class="row">
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <div class="med_tittle_cont_wrapper">
                        <div class="med_tittle_cont">
                            <ol class="breadcrumb">
                                <li><a th:href="@{/}">系统首页</a></li>
                                <li>消息中心</li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="page-container" style="background-color: lavender;">
        <div class="container">
            <div class="row med_bottompadder50">
                <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12">
                    <li style="font-size: x-large;margin-top: 20px;margin-bottom: 20px;">
                        <a th:href="@{/chat}" style="color: #839d85;">消息列表</a>
                    </li>
                    <div class="lyear-layout-sidebar-scroll">
                        <nav class="sidebar-main">
                            <ul class="nav nav-drawer">
                                <li class="nav-item" style="display: block;padding-top: 5px;padding-bottom: 5px;background-color: white;font-size: 18px;border-bottom: #8fafe4 1px solid;border-left: 3px solid #4cae4c;">
                                    <a th:href="@{/chat}" style="color: #4cae4c;">
                                        <i class="iconfont icon-home"></i>我的聊天</a>
                                </li>
                                <li class="nav-item" style="display: block;padding-top: 5px;padding-bottom: 5px;background-color: #4cae4c;font-size: 18px;border-bottom: #8fafe4 1px solid;">
                                    <a th:href="@{/auditResult}" style="color: #ffffff;">
                                        <i class="iconfont icon-home"></i>我的通知</a>
                                </li>
                                <li class="nav-item" style="display: block;padding-top: 5px;padding-bottom: 5px;background-color: #4cae4c;font-size: 18px;border-bottom: #8fafe4 1px solid;">
                                    <a th:href="@{/information/mypush}" style="color: #ffffff;">
                                        <i class="iconfont icon-home"></i>我的发布</a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </div>
                <div class="col-lg-9 col-md-9 col-sm-12 col-xs-12">
                    <div class="box" id="chat">
                        <!-- 聊天列表 -->
                        <div class="chat-list">
                            <!-- 顶部个人信息部分 -->
                            <div class="header" id="showInfo" style="display: block">
                                <div class="pic2">
                                    <img th:src="@{/images/U_me.jpg}" alt="">
                                </div>
                                <span th:text="${fromName}"></span>
                                <div class="search-friends" onclick="showSearch()"></div>
                            </div>
                            <!-- 巨大的搜索框 -->
                            <div class="search-input" id="showSearch" style="display: none">
                                <img th:src="@{/images/search.png}" class="search-input-img" alt="">
                                <input type="text" onmouseleave="closeSearch()">
                            </div>

                            <!-- 聊天列表 -->
                            <div class="friends">
                                <ul id="friendList">
                                    <li th:each="chatListDTO:${chatListDTOList}"
                                        th:class="${chatListDTO.toName == ''} ? 'current2' : ''"
                                    >
                                        <div class="friend-pic">
                                            <span th:if="${chatListDTO.unread != 0}" th:text="${chatListDTO.unread}"></span>
                                            <a th:href="@{/intoChat(linkId = ${chatListDTO.linkId}, toName=${chatListDTO.toName})}">
                                                <img th:src="@{/images/U_hr.jpg}" alt="">
                                            </a>
                                        </div>
                                        <a th:href="@{/intoChat(linkId = ${chatListDTO.linkId}, toName=${chatListDTO.toName})}">
                                            <i class="name" th:text="${chatListDTO.toName}" style="font-style: normal;"></i>
                                        </a>
                                        <a th:href="@{/intoChat(linkId = ${chatListDTO.linkId}, toName=${chatListDTO.toName})}">
                                            <i class="shortcut" th:text="${chatListDTO.lastMessage}" style="font-style: normal;"></i>
                                        </a>

                                        <div class="time" th:text="${chatListDTO.sendTime}"></div>
                                    </li>
                                </ul>
                            </div>
                        </div>

                        <!-- 聊天框 -->
                        <div class="chat-content">
                            <div class="firend-name"></div>
                            <div class="chat-middle" id="chatContainer"
                                 @scroll='scrollHistory($event)'>
                                <div class="content" id="ulName">
                                    <div class="chatMsg">
                                    </div>
                                </div>
                            </div>
                            <div class="chat-bottom">
                                <textarea cols="30" rows="10" placeholder="请输入要发送的消息..."
                                          id="messageInput"></textarea>
                                <button class="chat-send" id="sendId" >发送</button>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
<!--<script th:src="@{/chat/js/jquery.min.js}"></script>-->
<!--<script th:src="@{/chat/js/vue.min.js}"></script>-->
<!--<script th:src="@{/chat/js/axios.js}"></script>-->
<script th:src="@{/chat/layui/layui.all.js}"></script>
<!--<script th:src="@{/chat/js/page/isLogin.js}"></script>-->
<!--<script th:src="@{/chat/js/page/nav.js}"></script>-->
<!--<script th:src="@{/chat/js/page/chat.js}"></script>-->
<script th:src="@{/js/jquery_min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/js/wow.min.js}"></script>
<script th:src="@{/js/custom.js}"></script>
<script th:src="@{/plugins/slider-pro/js/jquery.sliderPro.min.js}"></script>
<script th:src="@{/plugins/owlcarousel/js/owl.carousel.min.js}"></script>
<script th:src="@{/layer/layer.js}"></script>
<script th:inline="javascript">
    function showSearch(){
        var showInfo = document.getElementById("showInfo");
        var showSearch = document.getElementById("showSearch");
        showInfo.style.display = "none";
        showSearch.style.display = "block";
    }
    function closeSearch(){
        var showInfo = document.getElementById("showInfo");
        var showSearch = document.getElementById("showSearch");
        showInfo.style.display = "block";
        showSearch.style.display = "none";
    }

</script>
</div>
</html>